<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" id="file"></input>
  <img id="img"/>
</body>
<script>
document.getElementById('file').onchange = function(){
  // console.log(this.files[0])
  let file = this.files[0]
  // 方式一 -通过fileReader,异步的字符串
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = function(e){
    // console.log(e.target.result)
    document.getElementById('img').src=e.target.result
  }

  // 方式二 - 通过URL对象 blob对象.二进制文件
  // document.getElementById('img').src= window.URL.createObjectURL(file)
}
</script>
</html>
